{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h2>搜索结果: "{{ query }}"</h2>

        {% if not products %}
            <div class="alert alert-warning">
                没有找到相关商品。
                <a href="/ticket?query={{ query }}" class="alert-link">提交问题工单</a>
            </div>
        {% else %}
            <div class="list-group">
                {% for product in products %}
                <div class="list-group-item">
                    <h5>{{ product.name }}</h5>
                    <p>{{ product.description }}</p>
                    <div class="d-flex justify-content-between">
                        <span class="badge bg-secondary">{{ product.category }}</span>
                        <strong>${{ "%.2f"|format(product.price) }}</strong>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                根据您的兴趣推荐
            </div>
            <div class="card-body">
                {% if recommendations %}
                    <div class="list-group">
                        {% for product in recommendations %}
                        <a href="#" class="list-group-item list-group-item-action">
                            <h6>{{ product.name }}</h6>
                            <small>${{ "%.2f"|format(product.price) }}</small>
                        </a>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted">暂无推荐</p>
                {% endif %}
            </div>
        </div>

        <div class="mt-3">
            <a href="/ticket?query={{ query }}" class="btn btn-outline-danger btn-sm">
                报告搜索问题
            </a>
        </div>
    </div>
</div>
{% endblock %}